<template>
  <!-- 使用 Teleport 将弹窗挂载到指定容器 -->
  <Teleport to="#center" :disabled="!show">
    <div
      v-if="show"
      class="pannel-dialog"
      :style="{ zIndex: `${2000 + level}` }"
    >
      <!-- 弹窗主体，使用动画效果 -->
      <div
        :class="[
          'dialog',
          'animate__animated',
          show ? 'animate__zoomIn' : 'animate__zoomOut',
        ]"
      >
        <!-- 弹窗背景图 -->
        <img
          class="dialog-bg"
          src="@/assets/images/dialog/弹框.png"
          alt="弹窗背景"
        />

        <!-- 关闭按钮 -->
        <div
          class="close"
          @click="closeDialog"
          role="button"
          tabindex="0"
          aria-label="关闭弹窗"
        >
          <img
            class="close-icon"
            src="@/assets/images/dialog/关闭.png"
            alt="关闭图标"
          />
        </div>

        <!-- 弹窗标题 -->
        <div class="title">{{ title }}</div>

        <!-- 弹窗内容插槽 -->
        <slot></slot>
      </div>
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useDialogLevel } from "@/store/dialogLevel";

// 定义组件属性接口
interface Props {
  title?: string;
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
  title: "暂无标题",
});

// 获取弹窗层级管理
const [level, addLevel, subLevel] = useDialogLevel();

// 控制弹窗显示状态
const show = ref<boolean>(false);

/**
 * 打开弹窗
 */
const openDialog = (): void => {
  show.value = true;
  addLevel();
};

/**
 * 关闭弹窗
 */
const closeDialog = (): void => {
  show.value = false;
  subLevel();
};

// 暴露方法供外部调用
defineExpose({
  openDialog,
  closeDialog,
});
</script>

<style lang="scss" scoped>
/* 弹窗遮罩层 */
.pannel-dialog {
  // 布局属性
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  // 尺寸属性
  width: 100%;
  height: 100%;

  // 视觉属性
  background-color: rgba(0, 0, 0, 0.5); // 添加半透明背景增强视觉效果
  z-index: 100;

  /* 弹窗主体 */
  .dialog {
    // 布局定位
    position: relative;

    // 尺寸属性
    width: 1261px;
    height: 754px;

    // 盒模型属性
    box-sizing: border-box;
    padding: 0 60px;

    // 层级属性
    z-index: 1;

    /* 弹窗背景图 */
    .dialog-bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }

    /* 关闭按钮 */
    .close {
      // 布局定位
      position: absolute;
      top: 100px;
      right: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

      // 尺寸属性
      width: 60px;
      height: 60px;

      // 交互属性
      cursor: pointer;
      z-index: 99;

      /* 关闭图标 */
      .close-icon {
        width: 40px;
        height: 40px;
      }
    }

    /* 弹窗标题 */
    .title {
      // 布局属性
      margin-top: 46px;
      text-align: center;

      // 文字样式
      font-family: "YouSheBiaoTiHei";
      font-size: 30px;
    }
  }
}
</style>